<template>
	<div class="bannerImg">
		<swiper
			style="border-radius: 10rpx;"
			v-if="bannerList.length > 0"
			class="bannerImg"
			:indicator-dots="false"
			@animationfinish="anFinish"
			indicator-color="#fff"
			indicator-active-color="#FF7200"
			:autoplay="canAuto"
			interval="5000"
			duration="300"
			:circular="true"
		>
			<swiper-item style="border-radius: 10rpx;" v-for="(bannerItem, bannerIndex) in bannerList" :key="bannerItem.id" @click="swiperClick(bannerItem)">
				<view style="position: relative;" class="bannerImgDetail">
					<image lazy-load class="bannerImgDetail" :src="bannerItem.imgUrl" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="isDotBox">
			<view @click.stop="changeBanner(index)" v-for="(item,index) in bannerList" :key="index" class="isDotOut">
				<view  :class="currentIndex == index ? 'isChoose' : ''" class="isDotBtn"></view>
			</view>
		</view>
	</div>
</template>

<script>
export default {
	data() {
		return {
			currentIndex:0,
			jjIdObj:{},
			canAuto: true,
			bannerList: [],
		};
	},
	methods: {
		changeBanner(index){
			this.currentIndex = index;
		},
		getBannerList() {
			this.zwyRequest({
				url: '/cdp/banner/no_category',
				data: {
					appId: getApp().globalData.extConfig['appId']
				}
			}).then(res => {
				console.log('res', res);
				if (res.length == 0) return;
				let tempBannerList = [];
				let activeObj = {};
				res && res.forEach((item, index) => {
					if (item.bannerType == 'PageCompilationWaterFall') tempBannerList.push(item);
					if (item.bannerType == 'CHOOSE_CAREFULLY') activeObj = item;
				});
				this.bannerList = tempBannerList;
				this.$uma && this.$uma.trackEvent('曝光位置', {
					name: 'banner'
				});
			});
		},
		swiperClick(item) {
			console.log('item', item);
			this.$statis({
				action: 'CLICK_BANNER',
				bannerId: item.id
			});
			this.zwyRouter(`/pages/video/video?fakeId=${item.fakeId}&compilationId=${item.id}`);
		},
		anFinish(e) {
			let index = e.detail.current;
			let id = this.bannerList[index].id;
			this.currentIndex = index;
			if (this.jjIdObj[id]) {
				return;
			} else {
				this.sendLog(id);
			}
		},
		sendLog(id) {
			if (this.canAuto) {
				this.jjIdObj[id] = true;
				this.$statis({
					action: 'BANNER_EXPOSURE',
					bannerId: id
				});
			}
		}
		
	},
	created() {
		console.log('created');
		this.getBannerList();
	},
	onHide() {
		this.canAuto = false;
	},
	onReady() {
		if (!this.createIntersectionObserver) {
			return;
		}
		// 监听播放中视频是否划出可视区
		this.observer = this.createIntersectionObserver({
			thresholds: [0.2, 0.8]
		}).relativeToViewport();
	},
	onShow() {
		console.log('onShow');
		this.canAuto = true;
	}
};
</script>

<style lang="scss" scoped>
	.isChoose{
		opacity: 1 !important;
		background-color: #FFFFFF !important;
	}
	.isDotBox{
		.isDotOut{
			width: 28rpx;
			height: 42rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.isDotBtn{
				transition: .3s;
				width: 18rpx;
				border-radius: 10rpx;
				height: 7rpx;
				background: rgba(255, 255, 255, 1);
				opacity: 0.4;
			}
		}
		position: absolute;
		right: 36rpx;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.bannerImgDetail {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
	//#ifdef MP-KUAISHOU
		.bannerImg {
			width: 664rpx;
			height: 280rpx;
			position: relative;
			margin: 0 auto;
		}
	//#endif
	//#ifdef MP-TOUTIAO
	.bannerImg {
		width: 710rpx;
		height: 294rpx;
		position: relative;
		margin: 0 auto 30rpx auto; 
		border-radius: 25rpx;
		overflow: hidden;
		box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.25);
	}
	//#endif
	
	
</style>
